import React, { memo } from 'react'
import "./index.scss";

import { getSizeImage } from '@/utils/format-utils';


export default memo(function WYAlbumCover(props) {
    // props 
        const {info,size =100 ,width=117,height=150,bgp=-570 } = props
        const {picUrl,name,artist} = info
    
    // 动态样式  
    const albumCoverStyle = {
        width:width+'px',
        height:height+'px'
    }
    const imgStyle = {
        width: size + 'px',
        height: size + 'px'
    }
    const albumImageStyle = {
        width: width + 'px',
        height: size + 'px'
    }
    const bgImgStyle = {
        backgroundPosition:`0 ${bgp}px`
    }
    

    return (
            <div className='album-cover' style={albumCoverStyle}>
                <div className='album-image' style={albumImageStyle}>
                    <img src={getSizeImage(picUrl,size)} 
                    alt="" style={imgStyle}/>
                    <a href="/todo" className="cover image_cover"
                    style={bgImgStyle}
                    >
                        {name}
                    </a>
                </div>
                <div className='album-info'>
                    <div className='name text-nowrap'>{name}</div>
                    <div className='artist text-nowrap'>{artist.name}</div>
                </div>
            </div>
        )

})